l t<template>
  <div class="chat-center-container">
    <!-- 导航栏 -->
    <div class="chat-nav-bar">
      <h2>{{ activeRoomInfo.name || '聊天中心' }}</h2>
      <div class="header-info">
        <span class="ws-status" :class="wsStatus">{{ wsStatus }}</span>
        <button v-if="activeTab === 'room'" @click="leaveRoom" class="leave-btn">离开房间</button>
      </div>
    </div>
    
    <!-- 标签切换栏 -->
    <div class="chat-tab-bar">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="{ 'active': activeTab === tab.id }"
        @click="switchTab(tab.id)"
      >
        {{ tab.label }}
      </button>
    </div>
    
    <!-- 内容区 -->
    <div class="chat-content-area">
      <!-- 私聊内容 -->
      <div v-if="activeTab === 'private'" class="private-chat">
        <private-chat-list 
          :messages="privateMessages"
          @message-click="handleMessageClick"
        />
      </div>
      
      <!-- 群聊内容 -->
      <div v-if="activeTab === 'room'" class="room-chat">
        <room-chat-list 
          :messages="roomMessages"
          @message-click="handleMessageClick"
        />
      </div>
    </div>

    <!-- 输入区 -->
    <div v-if="activeTab === 'room'" class="chat-input">
      <textarea
        v-model="inputMessage"
        placeholder="输入消息..."
        @keyup.enter="sendMessage"
      ></textarea>
      <button @click="sendMessage" class="send-btn">发送</button>
    </div>
  </div>
  
  <!-- 滚动到底部按钮 -->
  <button 
    v-if="showScrollToBottom" 
    @click="scrollToBottom" 
    class="scroll-to-bottom-btn"
    title="滚动到底部">
    <i class="fas fa-arrow-down"></i>
  </button>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { roomApi } from '@/api'
import { handleApiError } from '@/utils/error-handler'
import { formatTime } from '@/utils/date-utils'
import PrivateChatList from '@/components/chat/PrivateChatList.vue'
import RoomChatList from '@/components/chat/RoomChatList.vue'

const userStore = useUserStore()
const tabs = [
  { id: 'private', label: '私聊' },
  { id: 'room', label: '群聊' }
]

const activeTab = ref('private')
const activeRoomInfo = ref({})
const privateMessages = ref([])
const roomMessages = ref([])
const inputMessage = ref('')
const wsStatus = ref('连接中')
const showScrollToBottom = ref(false)

// 切换标签页
const switchTab = (tabId) => {
  activeTab.value = tabId
  if (tabId === 'room') {
    joinDefaultRoom()
  }
}

// 加入默认房间
const joinDefaultRoom = async () => {
  try {
    const data = await roomApi.getDefaultRoom()
    activeRoomInfo.value = data
    // TODO: 初始化WebSocket连接
  } catch (error) {
    handleApiError(error, '获取默认房间信息')
  }
}

// 发送消息
const sendMessage = () => {
  if (!inputMessage.value.trim()) return
  
  const newMsg = {
    id: Date.now(),
    content: inputMessage.value,
    user_id: userStore.userId,
    username: userStore.username,
    timestamp: new Date().toISOString(),
    status: 'sending'
  }
  
  roomMessages.value.push(newMsg)
  inputMessage.value = ''
  
  // TODO: 实际发送消息到服务器
}

// 离开房间
const leaveRoom = () => {
  // TODO: 实现离开房间逻辑
}

// 滚动到底部
const scrollToBottom = () => {
  // TODO: 实现滚动逻辑
}
</script>

<style scoped>
.chat-center-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.chat-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #7B68EE;
  color: white;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ws-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.ws-status.connected {
  background-color: #4CAF50;
  color: white;
}

.ws-status.disconnected {
  background-color: #F44336;
  color: white;
}

.ws-status.connecting {
  background-color: #FFC107;
  color: black;
}

.chat-tab-bar {
  display: flex;
  padding: 10px;
  background-color: white;
  border-bottom: 1px solid #eee;
}

.chat-tab-bar button {
  padding: 8px 16px;
  margin-right: 10px;
  border: none;
  background: none;
  cursor: pointer;
}

.chat-tab-bar button.active {
  color: #7B68EE;
  border-bottom: 2px solid #7B68EE;
}

.chat-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.chat-input {
  display: flex;
  padding: 10px;
  background-color: white;
  border-top: 1px solid #eee;
}

.chat-input textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
  min-height: 40px;
  max-height: 120px;
}

.send-btn {
  margin-left: 10px;
  padding: 0 15px;
  background-color: #7B68EE;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.scroll-to-bottom-btn {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #7B68EE;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</style>